<template>
	<div style="margin-top: 20px;margin-bottom: 30px;">
		<el-table border style="width: 100%" :data="list" @selection-change="handleSelectionChange" @select="select"
			@select-all="selectAll" size="small" :row-key="handleReserve" ref="tab">
			<el-table-column v-if="selection" type="selection" width="55" align="center" reserve-selection
				:selectable='checkboxSelect' />
			<template v-for="(item,index) in column">
				<el-table-column v-if="item.hidden!==true" align="center" :prop="item.field" :label="item.name"
					:width="item.width" :sortable="item.sort?true:false">

					<template #default="scope">
						<span
							:style="item.color? {color:item.color}:item.getStyle?item.getStyle(scope.row):{color:'#000'}">
							<el-switch v-if="column[index].model=='switch'" v-model="scope.row[item.field]"
								:active-value="1" :inactive-value="0"
								:disabled="column[index].disabled!=undefined?column[index].disabled:true"
								@change="column[index].change!=undefined? column[index].change(scope.row.id,scope.row[item.field]):()=>{}">
							</el-switch>
							<span v-else-if="column[index].model=='image'">
								<el-image v-if="scope.row[item.field]" :src="getImage(scope.row,item.field)"
									style=" height: 30px;" :preview-teleported="true" :z-index="1000001"
									:preview-src-list="[getImage(scope.row,item.field)]" />
							</span>
							<span v-else-if="column[index].model=='images'">
								<el-image v-for="(image,iiii) in scope.row[item.field]" :key="iiii" :src="image"
									style=" height: 30px;" :preview-src-list="scope.row[item.field]" teleported
									:initial-index="iiii" />
							</span>
							<span v-else-if="column[index].model=='label'">
								{{getLabel(column[index].value,scope.row[item.field])}}
							</span>
							<span v-else-if="column[index].model=='labels'">
								{{getLabels(column[index].value,scope.row[item.field],column[index].separator)}}
							</span>
							<span v-else-if="column[index].model=='rate'">
								<el-rate v-model="scope.row[item.field]" disabled />
							</span>
							<span v-else>
								<slot name="body" v-bind="{value:scope.row,slot:item.field}" v-if="column[index].slot">
									{{scope.row[item.field]}}
								</slot>
								<span v-else>{{scope.row[item.field]}}</span>
							</span>
						</span>
					</template>

				</el-table-column>
			</template>
			<el-table-column align="center" label="操作" v-if="show" :min-width="width" :fixed="action.fixed">
				<template #default="scope">
					<slot name="action" v-bind="scope.row">

					</slot>
				</template>
			</el-table-column>

		</el-table>

		<el-pagination style="margin-top: 10px;" v-if="showPage" @size-change="changeSize" @current-change="prev"
			background layout="prev, pager, next ,sizes" :total="total" :page-size="limit"
			:page-sizes="[50,100, 200, 300, 400]" />
	</div>
</template>

<script>
	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted,
	} from 'vue';
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'
	export default {
		props: {
			showPage: {
				type: Boolean,
				default: true,
			},
			limit: {
				type: Number,
				default: 20
			},
			page: {
				type: Number,
				default: 1
			},
			totalPage: {
				type: Number,
				default: 0
			},
			change: {
				type: Function,
				default: () => {}
			},
			column: {
				type: Array,
				default: () => {
					return []
				}
			},
			show: {
				type: Boolean,
				default: true
			},
			action: {
				type: Object,
				default: () => {
					return {
						width: "200",
						fixed: "right"
					}
				}
			},
			width: {
				type: Number || String,
				default: 200
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			selection: {
				type: Boolean,
				default: false
			},
			checkboxSelect: {
				type: Function,
				default: () => {
					return true
				}
			},
			rKey: {
				type: String,
				default: 'id'
			}
		},
		setup(props, ctx) {
			const data = reactive({
				pp: 1
			})
			const prev = (page) => {
				console.log('1111papge', page)
				ctx.emit("update:page", page)
				ctx.emit("change", page, true)
			}
			const getImageBaseUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const getUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			const getImage = computed(() => {
				return (row, field) => {
					if (row[field]) {
						return row[field].indexOf('http') != -1 ? row[field] : getUrl() + row[field]
					}

					return ''
				}
			})

			const handleSelectionChange = (val) => {
				ctx.emit("selection", val)
			}

			const handleReserve = (row) => {
				return row[props.rKey]
			}
			const select = () => {

			}
			const selectAll = () => {

			}
			const tab = ref(null)
			const clearSelection = () => {
				tab.value.clearSelection()
			}

			const getLabel = (list, value) => {
				let t = list.find(item => item.value == value)
				return t ? t.label : ''
			}
			const getLabels = (list, value, separator) => {
				let str = '';
				let i = 0;
				value.forEach(v => {
					i++;
					let t = list.find(item => item.value == v)
					if (t) {
						str = str + t.label
						if (i < value.length) {
							str += separator
						}
					}
				})
				return str;
			}
			const total = computed(() => {
				console.log('>>>>props.totalPage', props.totalPage)
				return props.limit * props.totalPage
			})
			onMounted(() => {
				prev(1)
				console.log("prerepp", JSON.stringify(props))
			})

			const changeSize = (value) => {
				console.log('>>>', JSON.stringify(value))
				ctx.emit("update:limit", value)
				prev(1)
			}

			return {
				prev,
				data,
				getImageBaseUrl,
				getUrl,
				getImage,
				handleSelectionChange,
				handleReserve,
				select,
				selectAll,
				tab,
				clearSelection,
				getLabel,
				getLabels,
				total,
				changeSize
			}
		}
	}
</script>

<style>
</style>